<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head lang="en">
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <th:block th:include="include :: header('添加角色')"/>
    <th:block th:include="include :: headertable"/>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:850px;height:660px;"></div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: footertable"/>
</body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var form;
    layui.use(['form'], function () {
        form = layui.form;
        if (parent.json) {
            var parent_json = parent.json;
            form.val("form", {
                "id": parent_json.id
                // , "name": parent_json.name
                , "code": parent_json.code
                , "number": parent_json.number
            })
            number_val = parent_json.number;
            var datatime = [], datauvalue = [], datapuvalue = [];
            ;
            $.ajax({
                url: "/ht/lineChart.json",
                type: "GET",
                data: {code: "02",number: number_val},
                success: function (result) {
                    // console.log(result)
                    if (result.status == '200') {
                        // console.log(result)

                        var data = result.rows;
                        for (var i = 0; i < data.length; i++) {
                            datatime.push(data[i].createTime);
                            datauvalue.push(data[i].uvalue);
                            datapuvalue.push(data[i].puValue);
                        }

                        var option = {
                            title: {},
                            tooltip: {},
                            legend: {
                                data: ['区域1之房间之铀剂量率-1', '区域1之房间之钚剂量率-1']
                            },
                            xAxis: {
                                data: datatime,
                                name: '时间',
                                nameLocation: 'center',
                                nameGap :55,
                                axisLabel: {
                                    interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
                                    rotate:-20    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: ['#224,230,241'],
                                        width: 1,
                                        type: 'solid'
                                    }
                                }
                            },
                            yAxis: {
                                name: '气溶胶剂量率(mBq/m3)',
                                nameLocation: 'center',
                                nameGap: 50
                            },
                            series: [
                                {
                                    name: '区域1之房间之铀剂量率-1',
                                    type: 'line',
                                    data: datauvalue,
                                },
                                {
                                    name: '区域1之房间之钚剂量率-1',
                                    type: 'line',
                                    data: datapuvalue,
                                }
                            ]
                        };
                        myChart.setOption(option);
                    }
                }
            });
        }

    })



    // 基于准备好的dom，初始化echarts实例


    // 指定图表的配置项和数据


    // 使用刚指定的配置项和数据显示图表。

</script>


<!--<script type="text/JavaScript">-->

<!--function loadTwoLine() {-->
<!--var myChart = echarts.init(document.getElementById('main'));-->
<!--// 显示标题，图例和空的坐标轴-->
<!--myChart.setOption({-->
<!--title: {-->
<!--text: '异步数据加载示例'-->
<!--},-->
<!--tooltip: {-->
<!--trigger: 'axis'-->
<!--},-->
<!--legend: {-->
<!--data: ['区域1之房间之Y剂量率-1']-->
<!--},-->
<!--toolbox: {-->
<!--show: true,-->
<!--feature: {-->
<!--mark: { show: true },-->
<!--dataView: { show: true, readOnly: false },-->
<!--magicType: { show: true, type: ['line', 'bar'] },-->
<!--restore: { show: true },-->
<!--saveAsImage: { show: true }-->
<!--}-->
<!--},-->
<!--calculable: true,-->
<!--xAxis: {-->
<!--type: 'category',-->
<!--boundaryGap: false, //取消左侧的间距-->
<!--data: []-->
<!--},-->
<!--yAxis: {-->
<!--type: 'value',-->
<!--splitLine: { show: false },//去除网格线-->
<!--name: ''-->
<!--},-->
<!--series: [{-->
<!--name: '区域1之房间之Y剂量率-1',-->
<!--type: 'line',-->
<!--symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形-->
<!--data: []-->
<!--}]-->
<!--});-->
<!--myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画-->
<!--var names = [];    //类别数组（实际用来盛放X轴坐标值）-->
<!--var series1 = [];-->
<!--$.ajax({-->
<!--type: 'get',-->
<!--url: '/ht/revEquipmentDataList.json',//请求数据的地址-->
<!--dataType: "json",        //返回数据形式为json-->
<!--success: function (result) {-->
<!--//请求成功时执行该函数内容，result即为服务器返回的json对象-->
<!--$.each(result.createTime, function (index, item) {-->
<!--series2.push(item.createTime);-->
<!--});-->
<!--myChart.hideLoading();    //隐藏加载动画-->
<!--myChart.setOption({        //加载数据图表-->
<!--xAxis: {-->
<!--data: names-->
<!--},-->
<!--series: [{-->
<!--data: series1-->
<!--}]-->
<!--});-->
<!--},-->
<!--error: function (errorMsg) {-->
<!--//请求失败时执行该函数-->
<!--alert("图表请求数据失败!");-->
<!--myChart.hideLoading();-->
<!--}-->
<!--});-->
<!--};-->
<!--loadTwoLine();-->
<!--</script>-->


</html>
